<template>
  <div class="navBody">
    <div class="navBox">
      <div class="logoBox">
        <img class="logo" :alt="'新盛合环保设备有限公司'+','" :src="logoPath">
      </div>
      <div class="navContent">
        <el-menu :default-active="activeIndex" :active-text-color="'#e92322'" class="el-menu-demo" mode="horizontal" @select="handlePageSelect">
           <el-menu-item index="1">{{ t('message.index') }}</el-menu-item>
           <el-menu-item index="2">{{ t('message.company') }}</el-menu-item>
           <el-menu-item index="3">{{ t('message.product') }}</el-menu-item>
           <el-menu-item index="4">{{ t('message.news') }}</el-menu-item>
           <el-menu-item index="5">{{ t('message.video') }}</el-menu-item>
           <el-menu-item index="6">{{ t('message.connect') }}</el-menu-item>
        </el-menu>
      </div>
      <div class="loginBox">
        <el-menu :default-active="myIndex" :active-text-color="'rgb(20, 108, 208)'" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleLoginSelect">
          <el-sub-menu index="7" v-if="showUser">
            <template #title>
              <div class="loginInfoBox" @click.native="toLogin">
                <span class="logoIcon"><span class="iconfont xinshenghelogo-1 logo"></span></span>
                <span class="loginInfo">{{ '欢迎，'+(currentUser && currentUser.nickName?currentUser.nickName.substr(0,1)+'**':currentUser.name.substr(0,1)+'**') }}</span>
              </div>
            </template>
            <el-menu-item  index="logOut" @click="loginout">{{t('message.loginOut')}}</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="8" v-else>
            <template #title>
              <div class="loginInfoBox" @click.native="toLogin">
                <span class="logoIcon"><span class="iconfont xinshenghelogo-1 logo"></span></span>
                <span class="loginInfo">{{ t('message.login')}}</span>
              </div>
            </template>
          </el-menu-item>

        </el-menu>
      </div>
    </div>
    
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted,watch, getCurrentInstance } from 'vue'
import {fileTrans} from '@/utils/fileTrans.ts'
// import { useStore } from 'vuex'
import { useStore } from '@/store/index.ts'
const store=useStore()

//引入i18n
import { useI18n } from 'vue-i18n'

const {t}=useI18n()

//引入缓存
import {sessionCache,localCache} from '@/utils/cache.ts'

//引入接口
import api from '@/api/index';

const {proxy}:any=getCurrentInstance()

//监听
const props=defineProps({
  language:{
    type:String,
    default:'zh-cn'
  }
})
watch(()=>proxy.language,(newVal)=>{
  console.log("language--: ",newVal);
},{immediate:true,deep:true}
)

watch(()=>store.state.count,(newVal,oldVal)=>{
    console.log("count++ ",newVal)
    getUser()
    console.log("currentUser: ",currentUser)
})

const activeIndex = ref('1')
const myIndex = ref('')

const leaders = [
  { name: '新盛合环保' }
]

let showUser=ref(false)
let currentUser=localCache.getCache('user')
getUser()
async function getUser(){
  console.log("--------------更新用户状态")
  currentUser=localCache.getCache('user')
  if(currentUser){
    showUser.value=true
  }else{
    showUser.value=false
  }
}

console.log("loginUser=====",store.state.loginUser)
console.log("currentUser========",currentUser)

const handlePageSelect = (key: any, keyPath: any) => {
  console.log(key, keyPath);
  console.log("activeIndex: ",activeIndex);
  
}
const handleLoginSelect = (key: any, keyPath: any) => {
  console.log(key, keyPath);
  console.log("myIndex: ",myIndex);
  if(key=='logOut'){
    console.log("登出");
  }else{
    console.log("登录,已登录则跳转会员中心");
  }
  
}

const logoPath=fileTrans.getAsssetsFile('header/logo-600-150.png')

const $emit=defineEmits<{
  (e:string,value:any):void
}>()


//前往登录
const toLogin=()=>{
  currentUser=localCache.getCache('user')
  console.log("前往登录");
  if(!currentUser){
    $emit('toLogin','')
  }
  
}

async function loginout(){
  let token=localCache.getCache('user').token || ''
  proxy.$loading()
  await api.logout(token).then((res:any)=>{
    console.log("退出res: ",res);
    if(res.success){
      localCache.clearCache()
      store.commit('setLoginUser',null)

      currentUser=undefined
      showUser.value=false

      $emit('logout','')

      console.log("退出成功： ",showUser);
      proxy.$message.success(res.responseData)
    }else{
      proxy.$message.error('退出登录失败，请联系客服！')
    }
    proxy.$loading().close()
  })
  
}

//改变现实user
const changeShowUser=(show:boolean)=>{
  showUser.value=show
  currentUser=localCache.getCache('user')
 
}

defineExpose({
  getUser, //注意向父组件暴露的方法，必须是async
  changeShowUser,
})

</script>

<style lang="scss" scoped>
@import '../assets/sass/index.scss';
@import '@/assets/sass/common.scss';
//头部导航
.navBody {
  width: 100%;
  display: flex;
  background-color: hsla(0,0%,98%,.9);
  font-size: 16px;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 5px 20px 0 rgba(0,0,0,.3);
  .navBox {
    width: 100%;
    height: 100%;
    padding: 0 80px 0 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex:1;
    .logoBox {
      width: 240px;
      height: 60px;
      padding: 10px 30px 10px 0;
      .logo{
        width: 100%;
        height: 100%;
      }
    }
    .navContent {
      width: calc(100% - 390px);
      ::v-deep .el-menu{
      border-bottom:unset;
      background-color: unset;
      }
      ::v-deep .el-menu--horizontal{
        height: 100%;
        width: 100%;
      }
      ::v-deep .el-menu-item.is-active{
        color:#777 !important;
        border-bottom: 5px solid var(--el-menu-active-color);
      }

      ::v-deep .el-menu-item{
        line-height: unset;
        padding-top:30px;
        padding-bottom: 20px;
        font-size: 18px;
        color: #777;
      }
      
    }
    .loginBox {
      width: 195px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      ::v-deep .el-menu{
        border-bottom:unset;
        background-color: unset;
      }
      ::v-deep .el-menu--horizontal{
        height: 100%;
        width: 100%;
      }
      ::v-deep .el-sub-menu__title{
        line-height: unset;
        border-bottom:unset;
      }
      ::v-deep .el-sub-menu__title{
        background-color: unset !important;
      }
      .loginInfoBox{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        
      }
      .logoIcon{
        // width: 22px;
        // height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: $lightBlue;
        font-weight: 500;
        border: 1px solid $lightBlue;
        border-radius: 50%;
        height:24px; 
        width:24px;
        margin-left: -2px;
        // &:before{
        //   position: absolute;
        //   top:0;
        //   left:18px;
        // }
        .logo{
          font-size: 16px;
        }
      }
      .loginInfo{
        color: #777 !important;
        padding-left: 10px;
      }

    }

  }
}
</style>